import React, { useRef, useState, useEffect } from 'react';
import { Space, Form, Input, Button } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
import trans from '@/utils/translate';
export interface env {
  key: string,
  value: string,
}
interface Props {
  envs: env[];
  setEnvs: any;
}
const { Item } = Form;
const AddEnv: React.FC<Props> = (props) => {
  const { envs, setEnvs } = props;
  const addEnv = () => {
    const envsNow = [...envs];
    envsNow.push({ key: '', value: '' });
    setEnvs(envsNow);
  }
  const deleteEnv = (index: number) => {
    const envsNow = [...envs];
    envsNow.splice(index, 1);
    setEnvs(envsNow);
  }
  const updateEnv = (key: string, value: string, index: number) => {
    const envsNow = [...envs];
    envsNow[index] = { key, value };
    console.log(envsNow);
    setEnvs(envsNow);
  }
  return (
    <div>
      {envs.map((env, index) => {
        return (
          <div style={{ marginBottom: '20px' }} key={index}>
            <Space align='center' >
              <Item style={{ marginBottom: 'unset' }}>
                <Input value={env.key} onChange={(e) => {updateEnv(e.target.value, env.value, index)}}/>
              </Item>
              <span>&nbsp;=&nbsp;</span>
              <Item style={{ marginBottom: 'unset' }}>
                <Input value={env.value} onChange={(e) => {updateEnv(env.key, e.target.value, index)}}/>
              </Item>
            </Space>
            <Button onClick={(e) => deleteEnv(index)} type='text' icon={<DeleteOutlined />}></Button>
          </div>
        );
      })}
      <div>
        <Button
          type='text'
          icon={<PlusOutlined />}
          size='middle'
          onClick={() => {
            addEnv();
          }}
        >
          {trans('deployOnline.edgeInference.add.addDnv')}
        </Button>
      </div>
    </div>
  )
}

export default AddEnv;
